<template>
    <div class="alterSex">
        <!-- 修改性别 -->
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
            <span class="iconfont icon-fanhui header_fanhui" @tap="gtolast()"></span>
            <!--标题-->
            <h1 class="mui-title">修改性别</h1>
            <span  class="mui-pull-right Tit" @tap="sendSex">确认</span>
        </header>
        <div class="alterSexNeir">
            <div class="line"></div>
            <ul class="mui-table-view mui-table-view-radio">
                <!--mui-selected-->
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">男</a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">女</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import mui from 'static/js/mui'
    import {updateCustomerMessage} from '@/api/user'
    import storage from "@/utils/localstorage"
    import { Toast } from 'mint-ui'
    //prevent用来阻止原生事件，去掉会有惊喜！
    export default {

        data() {
            return {
               alterSex:'',
               userInfo:{}
            }
        },
        props: {},
        watch: {},
        methods: {
            //返回上一层
            gtolast(){
                //this. sendSex()
                this.$router.push('/userMsg');//返回上一层
            },
            sendSex(){
                updateCustomerMessage(this.userInfo).then(response => {
                    storage.setLocalstorage('user',response.data)
                    this.$store.commit('SET_USER',response.data)
                    Toast('保存成功')
                    this.$router.push({
                        name:'userMsg'
                    })
                })
            }
        },
        filters: {},
        computed: {},
        created() { 
            this.userInfo =  storage.getLocalstorage('user')
        },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            var that=this
            var list = document.querySelector('.mui-table-view.mui-table-view-radio');
            list.addEventListener('selected',function(e){
                if(e.detail.el.textContent === "男"){
                    that.userInfo.sex = 0
                }else{
                    that.userInfo.sex = 1
                }
                //console.log(that.userInfo)
            });
         }
    }

</script>

<style lang="scss" scoped>



    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
    p{
      color:#333333!important;
      margin-bottom:4px;
    }
    .alterSexNeir .mui-table-view{
        top:44px;
    }
    
    .line{
        width: 100%;
        padding: 5px 0px 5px 0px;
        background-color: #f5f5f5;
    }
    
 
</style>